{% extends "base.html" %}

{% block title %}用户端 - 慢性病风险预测与智能干预系统{% endblock %}

{% block content %}
<!-- 用户端标题 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-user fa-lg"></i>
                    </div>
                    <div>
                        <h2 class="mb-1">个人健康管理中心</h2>
                        <p class="text-muted mb-0">健康监测 · 风险预警 · 个性化干预</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 健康概览 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="text-primary mb-2">
                    <i class="fas fa-heartbeat fa-2x"></i>
                </div>
                <h4 class="mb-1" id="currentRisk">中等风险</h4>
                <p class="text-muted mb-0">当前风险等级</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="text-success mb-2">
                    <i class="fas fa-chart-line fa-2x"></i>
                </div>
                <h4 class="mb-1" id="improvementScore">+12%</h4>
                <p class="text-muted mb-0">健康改善度</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="text-warning mb-2">
                    <i class="fas fa-calendar-check fa-2x"></i>
                </div>
                <h4 class="mb-1" id="daysActive">28</h4>
                <p class="text-muted mb-0">连续监测天数</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <div class="text-info mb-2">
                    <i class="fas fa-target fa-2x"></i>
                </div>
                <h4 class="mb-1" id="goalProgress">75%</h4>
                <p class="text-muted mb-0">目标完成度</p>
            </div>
        </div>
    </div>
</div>

<!-- 主要功能区域 -->
<div class="row">
    <!-- 健康指标趋势 -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line me-2"></i>
                    健康指标趋势
                </h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <select class="form-select" id="timeRange">
                            <option value="7">最近7天</option>
                            <option value="30" selected>最近30天</option>
                            <option value="90">最近3个月</option>
                            <option value="365">最近1年</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm active" onclick="showMetric('all')">全部</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="showMetric('bp')">血压</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="showMetric('glucose')">血糖</button>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="showMetric('weight')">体重</button>
                        </div>
                    </div>
                </div>
                <div id="healthTrendChart" class="chart-container"></div>
            </div>
        </div>
    </div>
    
    <!-- 风险分析 -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    风险分析
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6>当前风险等级</h6>
                    <div class="text-center">
                        <div class="display-6 text-warning">中等风险</div>
                        <div class="text-muted">综合风险概率: 45.2%</div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <h6>疾病风险</h6>
                    <div class="d-flex justify-content-between mb-2">
                        <span>高血压</span>
                        <span class="text-warning">52.3%</span>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar bg-warning" style="width: 52.3%"></div>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span>糖尿病</span>
                        <span class="text-info">38.1%</span>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar bg-info" style="width: 38.1%"></div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <h6>主要风险因素</h6>
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>BMI偏高</span>
                            <span class="badge bg-warning">高</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>运动不足</span>
                            <span class="badge bg-warning">中</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span>血压偏高</span>
                            <span class="badge bg-danger">高</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 干预建议和健康目标 -->
<div class="row">
    <!-- 个性化干预建议 -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>
                    个性化干预建议
                </h5>
            </div>
            <div class="card-body">
                <div class="intervention-card">
                    <h6 class="text-primary">
                        <i class="fas fa-utensils me-2"></i>
                        饮食建议
                    </h6>
                    <p class="small mb-2">采用DASH饮食模式，每日钠摄入<1500mg</p>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-success" style="width: 60%"></div>
                    </div>
                    <small class="text-muted">完成度: 60%</small>
                </div>
                
                <div class="intervention-card">
                    <h6 class="text-success">
                        <i class="fas fa-running me-2"></i>
                        运动建议
                    </h6>
                    <p class="small mb-2">每周至少150分钟中等强度有氧运动</p>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-warning" style="width: 40%"></div>
                    </div>
                    <small class="text-muted">完成度: 40%</small>
                </div>
                
                <div class="intervention-card">
                    <h6 class="text-info">
                        <i class="fas fa-weight me-2"></i>
                        体重管理
                    </h6>
                    <p class="small mb-2">目标减重5-10%，当前BMI: 26.5</p>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-info" style="width: 30%"></div>
                    </div>
                    <small class="text-muted">完成度: 30%</small>
                </div>
                
                <div class="text-center mt-3">
                    <button class="btn btn-outline-primary btn-sm" onclick="showAllRecommendations()">
                        <i class="fas fa-list me-1"></i>
                        查看全部建议
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 健康目标和提醒 -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-target me-2"></i>
                    健康目标
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6>本周目标</h6>
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <i class="fas fa-running text-success me-2"></i>
                                <span>运动150分钟</span>
                            </div>
                            <span class="badge bg-success">已完成</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <i class="fas fa-utensils text-warning me-2"></i>
                                <span>控制钠摄入</span>
                            </div>
                            <span class="badge bg-warning">进行中</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <i class="fas fa-weight text-info me-2"></i>
                                <span>减重0.5kg</span>
                            </div>
                            <span class="badge bg-secondary">未开始</span>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <h6>今日提醒</h6>
                    <div class="alert alert-info alert-sm">
                        <i class="fas fa-clock me-2"></i>
                        记得测量血压 (建议时间: 19:00)
                    </div>
                    <div class="alert alert-warning alert-sm">
                        <i class="fas fa-dumbbell me-2"></i>
                        运动提醒: 30分钟快走
                    </div>
                </div>
                
                <div class="text-center">
                    <button class="btn btn-primary btn-sm" onclick="addHealthRecord()">
                        <i class="fas fa-plus me-1"></i>
                        记录健康数据
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 健康记录 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-history me-2"></i>
                    健康记录
                </h5>
                <button class="btn btn-outline-primary btn-sm" onclick="exportHealthData()">
                    <i class="fas fa-download me-1"></i>
                    导出数据
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>收缩压</th>
                                <th>舒张压</th>
                                <th>血糖</th>
                                <th>体重</th>
                                <th>BMI</th>
                                <th>运动时长</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody id="healthRecordsTable">
                            <!-- 健康记录数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 初始化健康趋势图表
    initHealthTrendChart();
    loadHealthRecords();
    
    // 时间范围选择
    $('#timeRange').on('change', function() {
        const days = $(this).val();
        updateHealthTrendChart(days);
    });
    
    // 初始化健康趋势图表
    function initHealthTrendChart() {
        const chart = echarts.init(document.getElementById('healthTrendChart'));
        
        // 生成模拟数据
        const dates = [];
        const systolicBp = [];
        const diastolicBp = [];
        const bloodGlucose = [];
        const weight = [];
        
        for (let i = 29; i >= 0; i--) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
            
            // 模拟数据变化
            systolicBp.push(120 + Math.sin(i * 0.2) * 10 + Math.random() * 5);
            diastolicBp.push(80 + Math.sin(i * 0.2) * 5 + Math.random() * 3);
            bloodGlucose.push(100 + Math.sin(i * 0.3) * 8 + Math.random() * 4);
            weight.push(70 - i * 0.1 + Math.random() * 0.5);
        }
        
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['收缩压', '舒张压', '血糖', '体重']
            },
            xAxis: {
                type: 'category',
                data: dates
            },
            yAxis: [
                {
                    type: 'value',
                    name: '血压/血糖',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: '体重(kg)',
                    position: 'right'
                }
            ],
            series: [
                {
                    name: '收缩压',
                    type: 'line',
                    data: systolicBp,
                    itemStyle: { color: '#e74c3c' },
                    smooth: true
                },
                {
                    name: '舒张压',
                    type: 'line',
                    data: diastolicBp,
                    itemStyle: { color: '#c0392b' },
                    smooth: true
                },
                {
                    name: '血糖',
                    type: 'line',
                    data: bloodGlucose,
                    itemStyle: { color: '#f39c12' },
                    smooth: true
                },
                {
                    name: '体重',
                    type: 'line',
                    yAxisIndex: 1,
                    data: weight,
                    itemStyle: { color: '#27ae60' },
                    smooth: true
                }
            ]
        };
        
        chart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }
    
    // 更新健康趋势图表
    function updateHealthTrendChart(days) {
        // 这里可以根据选择的天数重新生成图表数据
        showAlert(`已更新为最近${days}天的数据`, 'info');
    }
    
    // 加载健康记录
    function loadHealthRecords() {
        const records = [
            { date: '2024-01-15', systolic: 125, diastolic: 82, glucose: 98, weight: 69.5, bmi: 24.1, exercise: 30, note: '正常' },
            { date: '2024-01-14', systolic: 128, diastolic: 85, glucose: 102, weight: 69.8, bmi: 24.2, exercise: 25, note: '血压略高' },
            { date: '2024-01-13', systolic: 122, diastolic: 80, glucose: 95, weight: 70.0, bmi: 24.3, exercise: 35, note: '良好' },
            { date: '2024-01-12', systolic: 130, diastolic: 88, glucose: 105, weight: 70.2, bmi: 24.4, exercise: 20, note: '需注意' },
            { date: '2024-01-11', systolic: 118, diastolic: 78, glucose: 92, weight: 70.5, bmi: 24.5, exercise: 40, note: '优秀' }
        ];
        
        displayHealthRecords(records);
    }
    
    // 显示健康记录
    function displayHealthRecords(records) {
        const tbody = $('#healthRecordsTable');
        tbody.empty();
        
        records.forEach(record => {
            const row = `
                <tr>
                    <td>${record.date}</td>
                    <td>${record.systolic}</td>
                    <td>${record.diastolic}</td>
                    <td>${record.glucose}</td>
                    <td>${record.weight}</td>
                    <td>${record.bmi}</td>
                    <td>${record.exercise}分钟</td>
                    <td>
                        <span class="badge ${record.note === '优秀' ? 'bg-success' : record.note === '良好' ? 'bg-info' : record.note === '正常' ? 'bg-primary' : 'bg-warning'}">
                            ${record.note}
                        </span>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }
    
    // 显示指标
    window.showMetric = function(metric) {
        // 更新按钮状态
        $('.btn-group .btn').removeClass('active');
        event.target.classList.add('active');
        
        // 这里可以实现图表筛选逻辑
        showAlert(`已切换到${metric === 'all' ? '全部指标' : metric === 'bp' ? '血压' : metric === 'glucose' ? '血糖' : '体重'}视图`, 'info');
    };
    
    // 显示全部建议
    window.showAllRecommendations = function() {
        showAlert('正在加载全部干预建议...', 'info');
    };
    
    // 添加健康记录
    window.addHealthRecord = function() {
        showAlert('正在打开健康记录表单...', 'info');
    };
    
    // 导出健康数据
    window.exportHealthData = function() {
        showAlert('正在导出健康数据...', 'info');
    };
});
</script>
{% endblock %}
